import { Input, Image, Badge } from 'antd';

import CarImg from '@/assets/img/car.png';
import CenterImg from '@/assets/img/center.png';
import CollectImg from '@/assets/img/collect.png';
import LogoImg from '@/assets/img/logo.png';
import MessageImg from '@/assets/img/message.png';
import SearchImg from '@/assets/img/search.png';
import EditorHerder from '@/pages/editor/EditorHerder/EditorHerder';
import { usePathname } from '@/router/hooks';
import userStore from '@/store/userStore';

import Layer from './layer';
import './menu.css';

import type { TabsProps } from 'antd';

import commonService from '@/api/services/commonService';

import { useEffect, useState } from 'react';

export default function MenuBlock() {
  const pathname = usePathname().replace('/', '');
  const [summary, setSummary] = useState<any>({});
  const [createVisible, setCreateVisible] = useState<boolean>(false);

  const [keyword, setKeyword] = useState('');

  useEffect(() => {
    const token = userStore.getState().userToken;
    if (token.accessToken) {
      commonService.getCustomApi('/member/mySummary', {}).then((res) => {
        setSummary(res);
      });
    }
  }, []);

  const items: TabsProps['items'] = [
    { key: 'create', label: '创作' },
    { key: 'goods', label: '购物' },
    { key: 'scene', label: '场景' },
  ];

  const handleTab = (url: string) => {
    window.location.href = `/#/${url}`;
  };

  const doSearch = () => {
    console.log(keyword, 333);
    sessionStorage.keyword = keyword;
    window.location.href = `/#/goods`;
  };
  return (
    <div className="relative h-[60px] w-full" style={{ borderBottom: '1px solid #e8e9ec' }}>
      {createVisible ? <Layer setCreateVisible={setCreateVisible} /> : null}
      <div className="relative left-[50%] ml-[-712px] flex h-[100%] w-[1424px] items-center justify-between">
        <div className="flex items-center">
          <a href="/#/index">
            <img src={LogoImg} className="mr-[76px] h-[39px] w-[100px]" alt="logo" />
          </a>
          <div className="flex flex-row gap-[84px]">
            {items.map((item) => {
              return (
                <div
                  key={item.key}
                  onClick={() => handleTab(item.key)}
                  onMouseEnter={() => item.key === 'create' && setCreateVisible(true)}
                  onMouseLeave={() => item.key === 'create' && setCreateVisible(false)}
                  className={[
                    'w-[80px]',
                    'h-[100%]',
                    'leading-[55px]',
                    'cursor-pointer',
                    'text-center',
                    'text-[20px]',
                    pathname.indexOf(item.key) !== -1 ? 'tab-active' : '',
                  ].join(' ')}
                >
                  {item.label}
                </div>
              );
            })}
          </div>
        </div>
        {/^editor/.test(pathname) ? (
          // 用户设计器的头部
          <EditorHerder shopCartItemCount={summary.shopCartItemCount} />
        ) : (
          <div className="flex items-center justify-end gap-[24px]">
            {pathname === 'index' ? (
              <div>
                <Input
                  value={keyword}
                  onChange={(e: any) => setKeyword(e.target.value)}
                  className="home-search"
                  placeholder="搜索商品"
                  style={{ width: '344px' }}
                  suffix={
                    <Image
                      preview={false}
                      onClick={doSearch}
                      className="h-[34px] w-[34px] cursor-pointer"
                      src={SearchImg}
                    />
                  }
                />
              </div>
            ) : (
              ''
            )}
            <a href="/#/admin/account">
              <Badge count={0}>
                <img src={CenterImg} alt="user" className="h-[32px] w-[32px]" />
              </Badge>
            </a>
            <a href="/#/admin/message">
              <Badge count={summary.messageCount}>
                <img src={MessageImg} alt="message" className="h-[32px] w-[32px]" />
              </Badge>
            </a>
            <a href="/#/admin/cart">
              <Badge count={summary.shopCartItemCount}>
                <img src={CarImg} alt="cart" className="h-[32px] w-[32px]" />
              </Badge>
            </a>
            <a href="/#/admin/collect">
              <Badge count={summary.collectionCount}>
                <img src={CollectImg} alt="collect" className="h-[32px] w-[32px]" />
              </Badge>
            </a>
          </div>
        )}
      </div>
    </div>
  );
}
